<template>
	<view class="container" :style="'background-image: url('  + WEBCONFIG.level_bg_image +  ');'">
		<uni-nav-bar @clickLeft='back' leftIcon='left' status-bar title="选择关卡" backgroundColor='transparent'
			:border='false' color="#2b2b2b"></uni-nav-bar>
		<image class="title-image mt-7 ml-10" :src="WEBCONFIG.title1_image"></image>

		<view class="pl-10 pr-10">
			<view class="uni-margin-wrap mt-4">
				<swiper class="swiper" :indicator-dots='count>20' indicator-color='#37CC2A'
					indicator-active-color='#185F16'>
					<swiper-item v-for='(val, key) in num' :key='val'>
					  <view class='flex flex-wrap swiper-item'>
					    <view v-for="(item,index) in 20" class="mt-6 ml-3 flex flex-center p-1" @click="playAudio()">
					      <view v-if="(20 * key) + item <= count">
					        <view v-if="index + (key * 20) + 1 <= record + 1" class="level text-shadow font-c flex flex-center"
					          :style="getLevelBackgroundImage(WEBCONFIG.icon1_image)"
					          @click="$page.open('/pages/game/index?types=' + types + '&level=' + item)">
					          {{ index + (key * 20) + 1 }}
					        </view>
					        <view v-else style="max-height: 120rpx;">
					          <view class="level text-shadow font-c1 flex flex-center"
					            :style="getLevelBackgroundImage(WEBCONFIG.icon_image)">
					            {{ index + (key * 20) + 1 }}
					          </view>
					          <image class="lock" :src="WEBCONFIG.lock_image"></image>
					        </view>
					      </view>
					    </view>
					  </view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad, onShow, onShareTimeline,onUnload, onShareAppMessage } from '@dcloudio/uni-app'
	import { $page, $http } from '@/utils'
	import { ref } from 'vue'
	import { useWebConfigStore, useRefs } from "@/stores";
	const num = ref(0)
	const count = ref(0)
	const record = ref(0)
	const types = ref(0)
	const webConfigStore = useWebConfigStore();
	const { WEBCONFIG } = useRefs(webConfigStore);

    const beatAudioContext =  uni.createInnerAudioContext()
	onLoad((option : any) => {
		if (option.types) {
			types.value = option.types
		}
	})
	onUnload(() => {
		beatAudioContext.destroy();
	})
	onShow(() => {
		getCount(types.value)
	})
	const getCount = (types : any) => {
		$http.get('Game/count', { data: { types: types } }).then((res : any) => {
			num.value = Math.ceil(res.data.count / 20)
			count.value = res.data.count
			record.value = res.data.record
		})
	}
	const back = () => {
		console.log(222)
		uni.navigateBack()
	}
	const getLevelBackgroundImage=(url:any)=>{
		 return `background-image: url('${url}');`;
	}
	
	const playAudio= (()=>{
		if (beatAudioContext.paused == false) {
			beatAudioContext.stop()
		} else {
			beatAudioContext.src = WEBCONFIG.value.audio.beat
			beatAudioContext.play()
		}
	})

	//分享
	onShareTimeline(() => {
		return $page.shareTimeline({
			path: '/pages/index/index'
		})
	})

	onShareAppMessage(() => {
		return $page.shareMessage({
			path: '/pages/index/index'
		})
	})
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;

		.swiper {
			height: calc(156rpx * 6);

		}
	}

	.container {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100vh;

		.title-image {
			width: 336rpx;
			height: 116rpx;
		}
	}

	.level {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 124rpx;
		height: 120rpx;
		font-size: 72rpx;
	}

	.lock {
		width: 62rpx;
		height: 64rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		bottom: 64rpx;
		right: -64rpx;
	}

	.font-c {
		color: #FFFFFF;
	}

	.font-c1 {
		color: #776E66;
	}
</style>